Membuat Frontend

untuk membuat frontned teman bisa mengikuti artikel Membuat Frontend dan setelah itu teman teman akan mendapatkan tampilan seperti ini

secara layout akan standar tetapi menu menunya bisa ditambahkan sendiri pada bab selanjutnya

Menambahkan depandency tambahan

alurkerja seperti sudah disepakati mengunakan react-icons karena pada icon tersebut banyak sekali icon yang bisa di gunakan sehingga teman teman bisa lebih leluasa memilih

uintuk menambahkan gunakan cimmand

yarn add react-icons /  npm i --save react-icons

Membuat Menu

Untuk menambahkan menu yang ada disidebar teman teman bisa membuka file src/layouts/AdminLayout.tsx

import { useState } from 'react'
import { Outlet } from 'react-router-dom'
import { Header, Sidebar } from 'alurkerja-ui'
import clsx from 'clsx'
import { FaBox, FaUser } from 'react-icons/fa';

export default function AdminLayout() {
  const [toggled, setToggled] = useState(false)

  return (
    <>
      <div className="fixed h-screen">
        <Sidebar toggled={toggled} setToggled={setToggled} menuConfig={[
            <!-- MENU object list -->
        ]} />
      </div>
      <div
        className={clsx(
          'transition-[margin] ease-in-out duration-400',
          toggled ? 'sm:ml-[80px]' : 'sm:ml-[270px]'
        )}
      >
        <Header />
        <main className="px-4 py-8">
          <Outlet />
        </main>
      </div>
    </>
  )
}

teman teman tinggal menambahkanmenu dengan format seperti di bawah ini
untuk membuat menu masterdata tambahkan

{
  label: "Master Data",
  icon:<FaBox></FaBox>,
  href: "/master/pegawai",
  child: [
    <!-- Menu Child HERE -->
  ]
}

dan untuk child nya bisa menambahkan code di bawah

{
    href: "/master/pegawai",
    label: "Pegawai",
    icon: <FaUser></FaUser>
},

Dimana FaUser Berasal Dari react-icons dan href adalah url yang akan kita daftarkan pada router selanjutnya

Menambahkan Page

Untuk manambahkan page kita perlu manambahkan folder page pada folder src lalu tambahkan context modal apa yang akan kita buat misalnya kita akan membuat module master maka buatlah tamble master

setelah itu buatlah file Kategori.tsx dengan isi

import { TableLowcode } from 'alurkerja-ui'
import { useState } from 'react'

function Kategori() {
  const [pageConfig, setPageConfig] = useState({ limit: 10, page: 0 })
  const [renderState, setRenderState] = useState(0)
  const [filterBy, setFilterBy] = useState<{ [x: string]: any }>()
  const [search, setSearch] = useState<string>()

  return (
    <section className="bg-white">
      <TableLowcode
        baseUrl=""
        specPath="/api/article/kategori"
        renderState={renderState}
        setRenderState={setRenderState}
        pageConfig={pageConfig}
        setPageConfig={setPageConfig}
        filterBy={filterBy}
        setFilterBy={setFilterBy}
        search={search}
        setSearch={setSearch}
      />
    </section>
  )
}

export default Kategori

Menambahkan Router

utnuk menambahkan router kita menggunakan libarary react-router-dom dan untuk membuatnya kita menggunaakn file src/routes/root.tsx

pada bagian

import { createBrowserRouter ,  useNavigate} from 'react-router-dom'
import { useEffect,  useState } from "react";

// layouts
import { AdminLayout ,  BaseLayout} from '@/layouts'

// pages
import App from '../App'
const router = createBrowserRouter([
  {
    path: '/',
    element:  <AdminLayout /> ,
    children: [{ index: true, element: <App /> }],
  },
//   Addtional Route here
])


export default router

tambahkan route pada browser route

    {
        path: '/master/kategori',
        element: <BaseLayout />,
        children: [{ index: true, element: <Kategori /> }],
    },

dan importkan component kategori dengan code dibawwah ini pada bagian import

import Circle from '@/pages/master/Kategori';

jika sudah selesai bisa dicoba klik pada sidebar menu pakah sudah melink atau belum